<template>
  <div class="parent d-flex jc-around">
    <div class="left mr-20 d-flex flex-column">
      <div class="left-top d-flex">
        <div class="card d-flex jc-start ai-center">
          <div class="card-img jinritongxing"></div>
          <div class="card-content">
            <div>{{ $t("pass_title") }}</div>
            <div class="jinritongxing-number card-number">
              {{ total_cnt }}
            </div>
          </div>
        </div>
        <div class="card d-flex jc-start ai-center">
          <div class="card-img white"></div>
          <div class="card-content">
            <div>{{ $t("alarmRule_whitelist") }}</div>
            <div class="white-number card-number">{{ white_list_cnt }}</div>
          </div>
        </div>
        <div class="card d-flex jc-start ai-center">
          <div class="card-img moshengren"></div>
          <div class="card-content">
            <div>{{ $t("alarmRule_stranger") }}</div>
            <div class="moshengren-number card-number">{{ stranger_cnt }}</div>
          </div>
        </div>
        <div class="card d-flex jc-start ai-center">
          <div class="card-img black"></div>
          <div class="card-content">
            <div>{{ $t("alarmRule_blacklist") }}</div>
            <div class="black-number card-number">{{ key_person_cnt }}</div>
          </div>
        </div>
      </div>
      <div class="left-bottom flex-1">
        <div class="video-box d-flex jc-center ai-center">
          <div
            v-for="item in screen_num"
            :key="item"
            class="video-item"
            :class="[
              screen_num === 1 ? 'w100' : 'w50',
              camera.length < item ? 'empty' : '',
            ]"
          >
            <VideoPlay
              v-if="camera[item - 1] !== void 0"
              :channel="camera[item - 1]"
            />
          </div>
        </div>
        <div class="left-bottom-operate d-flex ai-center mt-30">
          <div class="mr-10">{{ $t("realTimeVideoTag") }}:</div>
          <Camera
            class="mr-10"
            v-model="camera"
            :multiple-limit="screen_num"
            @updateCameraList="updateCameraList"
            @change="handleCameraChange"
          />
          <el-select v-model="screen_num" @change="handleScreenChange">
            <el-option
              v-for="item in screenList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="right flex-1 d-flex flec-column jc-start ai-center">
      <div class="right-top pl-20 pr-20 mb-20 d-flex flex-column">
        <div class="title d-flex jc-between">
          <div class="title-left d-flex ai-center">
            <div class="divider"></div>
            {{ $t("rt_alarm") }}
          </div>
          <div class="title-right d-flex ai-center">
            <img
              v-if="isAudioStart"
              @click="handleToggleAudio"
              src="./assets/audio.svg"
              class="mr-20"
            />
            <img
              v-else
              @click="handleToggleAudio"
              src="./assets/audioClose.svg"
              class="mr-20"
            />
            <el-popover
              placement="bottom"
              width="400"
              trigger="click"
              popper-class="channel-popover"
            >
              <ul class="multi-dropdown">
                <li
                  v-for="item in alarm_type_list"
                  :key="item.value"
                  class="multi-dropdown-item"
                  :class="item.isSelected ? 'active' : ''"
                  @click="handleSelectCameraPlay(item)"
                >
                  <span
                    class="el-tooltip"
                    aria-describedby="el-tooltip-6913"
                    tabindex="0"
                    >{{ item.label }}</span
                  >
                </li>
              </ul>
              <img class="mr-20" src="./assets/alarm.svg" slot="reference" />
            </el-popover>
            <el-popover
              placement="bottom"
              width="400"
              trigger="click"
              popper-class="channel-popover"
            >
              <ul class="multi-dropdown">
                <li
                  v-for="item in cameraList"
                  :key="item.id"
                  class="multi-dropdown-item"
                  :class="item.isSelected ? 'active' : ''"
                  @click="handleSelectCameraPlay(item)"
                >
                  <span
                    class="el-tooltip"
                    aria-describedby="el-tooltip-6913"
                    tabindex="0"
                    >{{ item.name }}</span
                  >
                </li>
              </ul>
              <img src="./assets/play.png" slot="reference" />
            </el-popover>
          </div>
        </div>
        <transition-group
          class="right-top-content mt-20"
          tag="div"
          name="slide-fade"
        >
          <div
            class="alarm-item"
            v-for="item in showSnapList"
            :key="item.snap_id"
          >
            <FaceAlarmCard
              v-if="item.obj_label === 1"
              :cardInfo="item"
              @click.native="handleShowFaceAlarm(item)"
            />
            <BodyAlarmCard
              v-if="item.obj_label === 2"
              :cardInfo="item"
              @click.native="handleShowBodyAlarm(item)"
            />
            <CarAlarmCard
              v-else-if="item.notify == 1 && item.vehicle_attr"
              :cardInfo="item"
              @click.native="handleShowCar(item)"
            />
          </div>
        </transition-group>
      </div>
      <div class="right-bottom pl-20 pr-20 d-flex flex-column">
        <div class="title d-flex jc-between">
          <div class="title-left d-flex ai-center">
            <div class="divider"></div>
            {{ $t("rt_snap") }}
          </div>
        </div>
        <div class="right-bottom-content d-flex flex-column mt-10 mb-10 flex-1">
          <!-- 人脸抓拍 -->
          <transition-group class="img-box d-flex" name="slide-fade" tag="div">
            <div
              v-for="item in snapFaceList"
              :key="item.snap_id"
              class="img-item"
            >
              <MyImage
                width="70px"
                height="70px"
                :src="item.snap_path"
                :class="{ language, isalive: item.alive_type == 1 }"
                @click.native="handleShowFace(item)"
              />
              <span>{{ item.camera_name }}</span>
            </div>
          </transition-group>
          <!-- 人体抓拍 -->
          <transition-group class="img-box d-flex" name="slide-fade" tag="div">
            <div
              v-for="item in snapBodyList"
              :key="item.snap_id"
              class="img-item"
            >
              <MyImage
                width="70px"
                height="70px"
                :src="item.snap_path"
                @click.native="handleShowBody(item)"
              />
              <span>{{ item.camera_name }}</span>
            </div>
          </transition-group>
          <!-- 车辆抓拍 -->
          <transition-group class="img-box d-flex" name="slide-fade" tag="div">
            <div
              v-for="item in snapVehicleList"
              :key="item.snap_id"
              class="img-item"
            >
              <MyImage
                width="70px"
                height="70px"
                :src="item.snap_path"
                @click.native="handleShowCar(item)"
              />
              <span>{{ item.camera_name }}</span>
            </div>
          </transition-group>
        </div>
      </div>
    </div>
    <audio ref="audio" style="display: none" controls="controls" />
    <FaceDetail :visible.sync="faceDetailVisible" :row="row" />
    <BodyDetail :visible.sync="bodyDetailVisible" :row="row" />
    <CarDetail :visible.sync="carDetailVisible" :row="row" />
    <FaceAlarmDetail :visible.sync="faceAlarmDetailVisible" :row="row" />
    <BodyAlarmDetail :visible.sync="bodyAlarmDetailVisible" :row="row" />
  </div>
</template>

<script>
import Camera from "@/components/select/Camera";
import  websocketAction  from "./mixins/websocket.js";
import { getPersonTotal, getList } from "./service";
import CarAlarmCard from "./CarAlarmCard";
import FaceAlarmCard from "./FaceAlarmCard";
import BodyAlarmCard from "./BodyAlarmCard";
import VideoPlay from "./VideoPlay";
import FaceDetail from "./FaceDetail";
import CarDetail from "./CarDetail";
import BodyDetail from "./BodyDetail";
import FaceAlarmDetail from "./FaceAlarmDetail.vue";
import BodyAlarmDetail from "./BodyAlarmDetail.vue";
import {
  lib_type_list,
  behavior_alarm_type_list,
  status_alarm_type_list,
  violation_alarm_type_list,
  nonvehicle_alarm_type_list,
} from "@/utils/CONSTANT";
import abc from "./test.json";
export default {
  components: {
    Camera,
    CarAlarmCard,
    FaceAlarmCard,
    BodyAlarmCard,
    VideoPlay,
    FaceDetail,
    CarDetail,
    BodyDetail,
    FaceAlarmDetail,
    BodyAlarmDetail,
  },
  mixins: [websocketAction],
  data() {
    return {
      faceDetailVisible: false,
      faceAlarmDetailVisible: false,
      bodyAlarmDetailVisible: false,
      carDetailVisible: false,
      bodyDetailVisible: false,
      row: {
        vehicle_attr: {},
        face_attr: {},
      },
      key_person_cnt: 0,
      white_list_cnt: 0,
      stranger_cnt: 0,
      camera: [],
      screen_num: 1,
      screenList: [
        { label: this.$t("oneSplitScreen"), value: 1 },
        { label: this.$t("fourSplitScreen"), value: 4 },
      ],
      isAudioStart: false,
      cameraList: [],
      alarm_type_list: [
        ...lib_type_list,
        ...behavior_alarm_type_list,
        ...status_alarm_type_list,
        ...violation_alarm_type_list,
        ...nonvehicle_alarm_type_list,
      ],
      audio_alarm_list: [1, 3, "394", "395", "398", "396"],
      showSnapList: [],
      snapFaceList: [],
      snapBodyList: [],
      snapVehicleList: [],
      jsonData: abc,
    };
  },
  mounted() {
    this.getListR();
    // this.startGetAlarm();
    this.getPersonTotal();
    this.alarm_type_list.forEach((item) => {
      if ([1, 2].includes(item.value)) {
        this.$set(item, "isSelected", true);
      }
    });
  },
  computed: {
    language() {
      return this.$store.state.language;
    },
    // showSnapList: {
    //   get() {
    //     const res = this.snapList.filter(this.shouldShow);
    //     return res.slice(0, 3);
    //   },
    // },
    // snapFaceList: {
    //   get() {
    //     const res = this.snapList.filter((item) => !this.shouldShow(item));
    //     return res
    //       .filter((item) => {
    //         return item.obj_label == 1;
    //       })
    //       .slice(0, 8);
    //   },
    // },
    // snapBodyList: {
    //   get() {
    //     const res = this.snapList.filter((item) => !this.shouldShow(item));
    //     return res
    //       .filter((item) => {
    //         return item.obj_label == 2;
    //       })
    //       .slice(0, 8);
    //   },
    // },
    // snapVehicleList: {
    //   get() {
    //     const res = this.snapList.filter((item) => !this.shouldShow(item));
    //     return res
    //       .filter((item) => {
    //         return item.vehicle_attr;
    //       })
    //       .slice(0, 8);
    //   },
    // },
    total_cnt() {
      return this.key_person_cnt + this.white_list_cnt + this.stranger_cnt;
    },
  },
  methods: {
    getListR() {
      getList().then((res) => {
        var snapData = res.data;
        let i = 0;
        while (i < snapData.length) {
          this.showSnapList.unshift(snapData[i]);
          i++;
          console.log(snapData[i]);
        }
      });
    },
    startGetAlarm() {
      this.intervalId = setInterval(() => {
        this.getListR();
      }, 5000); // 每 2000 毫秒（2 秒）执行一次
    },
    handleShowCar(row) {
      this.carDetailVisible = true;
      this.row = { ...row };
    },
    handleShowFace(row) {
      this.faceDetailVisible = true;
      this.row = { ...row };
    },
    handleShowBody(row) {
      this.bodyDetailVisible = true;
      this.row = { ...row };
    },
    handleShowFaceAlarm(row) {
      this.faceAlarmDetailVisible = true;
      this.row = { ...row };
    },
    handleShowBodyAlarm(row) {
      this.bodyAlarmDetailVisible = true;
      this.row = { ...row };
    },
    shouldShow(item) {
      const eventTypeInfo = this.alarm_type_list.find(
        (i) => i.value === item.events_type || i.value === item.lib_type
      );
      const isEventTypeSelected = eventTypeInfo && eventTypeInfo.isSelected;
      const cameraInfo = this.cameraList.find((i) => i.id === item.channel);
      const isCameraSelected = cameraInfo && cameraInfo.isSelected;
      let isSelected = isEventTypeSelected && isCameraSelected;
      return isSelected;
    },
    playAudio(data) {
      let needPlay =
        this.shouldShow(data) &&
        this.isAudioStart &&
        (this.audio_alarm_list.includes(data.events_type) ||
          this.audio_alarm_list.includes(data.alarm_type));
      if (needPlay) {
        if (this.$refs && this.$refs.audio) {
          this.$refs.audio.src = require("./assets/alarm.mp3");
          this.$refs.audio.currentTime = 0;
          this.$nextTick(() => {
            this.$refs.audio.load();
            this.$refs.audio.play();
          });
        }
      }
    },
    async getPersonTotal() {
      const res = await getPersonTotal();
      if (res.code != 0) return;
      this.key_person_cnt = res.data.key_person_cnt;
      this.white_list_cnt = res.data.white_list_cnt;
      this.stranger_cnt = res.data.stranger_cnt;
    },
    handleScreenChange(val) {
      this.camera = this.cameraList.slice(0, val).map((item) => item.id);
    },
    updateCameraList(cameraList) {
      this.cameraList = cameraList;
      this.camera = this.cameraList
        .slice(0, this.screen_num)
        .map((item) => item.id);
      this.cameraList.forEach((item) => {
        this.$set(item, "isSelected", true);
      });
    },
    handleToggleAudio() {
      this.isAudioStart = !this.isAudioStart;
    },
    handleSelectCameraPlay(item) {
      this.$set(item, "isSelected", !item.isSelected);
    },
    // 开启不同的视频流
    handleCameraChange() {},
  },
};
</script>

<style lang="less" scoped>
.parent {
  width: 100%;
  height: 100%;
  font-size: 14px;
  background: #e8ebf0;
  padding: 20px;
  overflow: auto;
  .left,
  .right {
    height: 100%;
  }
  .right {
    display: flex;
    flex-direction: column;
    &-top {
      flex: 1;
      width: 100%;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      &-content {
        overflow: auto;
        flex: 1;
        .alarm-item {
          transition: all 0.5s;
          z-index: 9;
          &.slide-fade-enter-active {
            transition: all 0.3s ease;
          }
          &.slide-fade-leave-active {
            transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
          }
          &.slide-fade-enter {
            transform: translateY(-100%);
            opacity: 0;
          }
          &.slide-fade-leave-to {
            scale: 0.5;
            transform: translateY(100%) translateX(100%);
            opacity: 0;
          }
        }
      }
      /deep/ .el-popover__reference-wrapper {
        vertical-align: -webkit-baseline-middle;
      }
    }
    &-bottom {
      flex: 1;
      width: 100%;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      min-height: 400px;
      &-content {
        flex-wrap: wrap;
        overflow: auto;
        flex: 1;
        .img-box {
          flex-wrap: nowrap;
          overflow: auto;
          border-top: 1px solid #ccc;
          flex: 1;
          align-items: center;
          .img-item {
            transition: all 0.5s;
            width: 70px;
            height: 90px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 10px;
            z-index: 9;
            /* 可以设置不同的进入和离开动画 */
            /* 设置持续时间和动画函数 */
            &.slide-fade-enter-active {
              transition: all 0.3s ease;
            }
            &.slide-fade-leave-active {
              transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
            }
            &.slide-fade-enter {
              transform: translateX(-100%);
              opacity: 0;
            }
            &.slide-fade-leave-to {
              transform: translateX(100%);
              opacity: 0;
            }
          }
        }
      }
    }
    .title {
      width: 100%;
      height: 56px;
      line-height: 56px;
      position: relative;
      background: #fcfcfd;
      font-size: 20px;
      .title-right {
        img {
          width: 27px;
          height: 24px;
          cursor: pointer;
        }
      }
      .divider {
        background-image: linear-gradient(
          180deg,
          rgba(45, 204, 112, 1) 0,
          rgba(52, 152, 219, 1) 100%
        );
        border-radius: 4px;
        width: 4px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }
  .left {
    flex: 1.1;
    &-top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
    &-bottom {
      display: flex;
      flex-direction: column;
      padding: 20px;
      background: #fff;
      border-radius: 10px;
      .video-box {
        width: 834px;
        height: 500px;
        flex-wrap: wrap;
        .video-item {
          width: 100%;
          height: 100%;
          &.empty {
            background: #ccc;
          }
          &.w50 {
            width: 50%;
            height: 50%;
          }
          &.w100 {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .card {
    margin-bottom: 10px;
    background-image: linear-gradient(
      181deg,
      rgba(255, 255, 255, 1) 0,
      rgba(255, 255, 255, 1) 53.877217%,
      rgba(239, 244, 255, 1) 100%
    );
    border-radius: 8px;
    width: 430px;
    height: 110px;
    padding: 20px;
    border: 1px solid rgba(96, 97, 112, 0.07058823853731155);
    &-img {
      width: 64px;
      height: 64px;
    }
    &-number {
      font-size: 26px;
      line-height: 26px;
      height: 26px;
    }
    &-content {
      flex: 1;
      margin-left: 20px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: start;
      font-size: 18px;
    }
    .jinritongxing {
      background: url(./assets/jinritongxing.png) no-repeat;
      background-size: 100% 100%;
      &-number {
        color: rgba(0, 115, 254, 1);
      }
    }
    .white {
      background-size: 100%;
      box-shadow: 0px 6px 12px 0px rgba(6, 194, 112, 0.101961);
      background-image: linear-gradient(
        315deg,
        rgba(6, 194, 112, 1) 0,
        rgba(28, 222, 112, 1) 100%
      );
      border-radius: 16px;
      position: relative;
      &:after {
        content: "";
        background: url(./assets/white.png) center no-repeat;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50%;
      }
      &-number {
        color: rgba(6, 194, 112, 1);
      }
    }
    .moshengren {
      background-size: 100% 100%;
      box-shadow: 0px 6px 12px 0px rgba(255, 136, 0, 0.101961);
      background-image: linear-gradient(
        315deg,
        rgba(255, 136, 0, 1) 0,
        rgba(252, 183, 80, 1) 100%
      );
      border-radius: 16px;
      position: relative;
      &-number {
        color: rgba(255, 136, 0, 1);
      }
      &:after {
        content: "";
        background: url(./assets/moshengren.png) center no-repeat;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50%;
      }
    }
    .black {
      background: url(./assets/black.png) no-repeat;
      background-size: 100% 100%;
      &-number {
        color: rgba(57, 72, 90, 1);
      }
    }
  }
}
@keyframes slide-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-in-left {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slide-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
<style lang="less">
.channel-popover {
  width: 220px !important;
}
.channel-popover .multi-dropdown .multi-dropdown-item,
.alarm-popover .multi-dropdown .multi-dropdown-item {
  font-size: 14px;
  position: relative;
  height: 34px;
  line-height: 34px;
  box-sizing: border-box;
  cursor: pointer;
  color: #606266;
  padding: 0 20px;
  width: 175px;
}
.channel-popover .multi-dropdown,
.alarm-popover .multi-dropdown {
  list-style: none;
  padding: 6px 0;
  margin: 0;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  max-height: 50vh;
}
.channel-popover .multi-dropdown .multi-dropdown-item > span,
.alarm-popover .multi-dropdown .multi-dropdown-item > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 175px;
  display: inline-block;
}
.channel-popover .multi-dropdown .multi-dropdown-item:hover,
.alarm-popover .multi-dropdown .multi-dropdown-item:hover {
  background-color: #f5f7fa;
}
.channel-popover .multi-dropdown .multi-dropdown-item.active,
.alarm-popover .multi-dropdown .multi-dropdown-item.active {
  color: #409eff;
}
</style>
